<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="assets/icon.png">

<title>测试和WEB数据格式转换工具</title>
</head>

<body>
<div class="lowB" style="font-size: 50px;text-align: center;color: #f60;">本工具未支持low b浏览器，换个吧&#x1f644;</div><script>document.querySelector(".lowB").innerHTML=``;</script>

<style>
body{
	word-wrap: break-word;
	background:#f5f5f5 center top no-repeat;
	background-size: auto 680px;
	
	font-size:16px;
}
.main{
	margin:0 auto;
	padding:0 50px 80px;
}
pre{
	white-space:pre-wrap;
}

.main .AreaFormat {
	position: relative;
	top:0;left:0;width:100%;
	margin-top:20px;
}


a{
	text-decoration: none;
	color:#06c;
}
a:hover{
	color:#f00;
}
p{
	text-indent: 32px;
}
img{
	max-width:90%;
}

.Center{
	text-align: center;
}


.mainBox{
	margin-top:12px;
	padding: 12px;
	border-radius: 6px;
	background: #fff;
	--border: 1px solid #f60;
	box-shadow: 2px 2px 3px #aaa;
}

.lb{
	display:inline-block;
	vertical-align: middle;
	background:#00940e;
	color:#fff;
	font-size:14px;
	padding:2px 8px;
	border-radius: 99px;
}

.pd{
	padding:0 0 6px 0;
}
.del{
	text-decoration: line-through;
}
.b{
	font-weight: bold;
	font-style: normal;
}
.i{
	padding: 2px 4px;
	background-color: #f6f6f6;
	vertical-align: middle;
	color: #c7254e;
	font-size: 12px;
	white-space: pre-wrap;
	border-radius: 3px;
	font-style: normal;
}
</style>


<div class="main">
	<div class="mainBox">
		<span style="font-size:32px;color:#0B0;">AreaCity 测试和WEB数据格式转换工具</span>
		<a href="https://github.com/xiangyuecn/AreaCity-JsSpider-StatsGov">GitHub >></a> |
		<a href="https://gitee.com/xiangyuecn/AreaCity-JsSpider-StatsGov">Gitee >></a>
		
		<div style="padding-top:10px">
			<span class="lb">小提示 :</span>
			本工具是用来转换省市区镇四级数据为js支持的格式的，不支持导入数据库，也不支持处理坐标和城市边界范围书记，如果你要导入数据库、或转换坐标和城市边界范围数据（如shp、geojson、sql），<a href="assets/AreaCity-Geo-Transform-Tools.html" target="_blank">请点此处下载《AreaCity-Geo格式转换工具软件》</a>轻松处理。
		</div>
		<div style="padding-top:10px">
			<span style="margin-right:20px">
				<span class="lb">【四级】省市区镇 4级数据 :</span> <a href="assets/download.html" target="_blank">点此下载</a>
			</span>
			
			<span style="margin-right:20px">
				<span class="lb">【GEO三级】省市区 坐标+边界范围 :</span> <a href="assets/download.html" target="_blank">点此下载</a>
			</span>
			
			<span style="margin-right:20px">
				<span class="lb">【GEO四级】乡镇 坐标+边界范围  :</span> <a href="assets/geo-level4.html" target="_blank">点此下载</a>
			</span>
			
			<span style="margin-right:20px">
				<span class="lb">坐标边界在线预览  :</span> <a href="assets/geo-echarts.html" target="_blank">点此测试</a>
			</span>
		</div>
	</div>

	<script>var AreaFormatBoxElem=document.querySelector(".main")</script>
	<script src="测试和WEB数据格式转换工具.js"></script>

	<div class="mainBox DonateLogs"></div>
</div>

<script src="https://xiangyuecn.gitee.io/buildhtml/buildhtml.js"></script>
<script>
function el(cls){
	return document.querySelector(cls);
};

if(/^file:/.test(location.href)){
	FormatLog("浏览器直接打开的html文件，不加载演示数据，请手动操作",1);
}else{
	el(".AreaFormatFrom").innerHTML=BuildHTML(`
<select class="AreaFormatFromSelect" onchange="swapFrom()">
{{::
	;BuildHTMLArray('<option value="{fn:BuildHTMLArray.index+1}">{fn::AllowAccessFolder}/{fn::o}</option>',AllowAccessFiles)
}}
<\/select>`);
	var swapFrom=function(){
		var from=+el(".AreaFormatFromSelect").value-1;
		var path=AllowAccessFolder+"/"+AllowAccessFiles[from];
		FormatLog("【"+path+"】数据加载中...请稍后");
		var ajax=new XMLHttpRequest();
		ajax.open("GET",path.replace(/\(.+\)/,""));
		ajax.onreadystatechange=function(){
			if(ajax.readyState==4){
				if(ajax.status==200){
					var input=el(".AreaFormatInput");
					input.value=ajax.responseText;
					
					FormatLog(`成功加载【${path}】数据。
					<hr>
					<div>输入框中本来的提示信息：</div>
					<pre>${input.placeholder}</pre>
					
					<hr>
					<div class='initTest1'></div>
					
					<hr>
					<div class='initTest2'></div>
					
					<hr>
					<div class='initTest3'></div>`);//<script>
					
					TestClick("js",".initTest1");
					TestClick("jsonObject",".initTest2",460204);//选中 三亚 天涯
					TestClick("jsonArray",".initTest3",11);//选中 北京
				}else{
					FormatLog("【"+path+"】数据加载失败");
				}
			}
		}
		ajax.send();
	};
	swapFrom();
};
</script>


<div style="width:0;height:0;overflow:hidden;">
	<img src="https://ia.51.la/go1?id=20807127&pvFlag=1">
</div>

<!-- 加载echarts map测试挂件 -->
<script src="assets/geo-echarts.js"></script>
<div class="GeoEChartsView"></div>
<script>
GeoECharts.CreateWidget({
	mobElem:document.querySelector(".GeoEChartsView")
});
</script>

<!-- 加载打赏挂件 -->
<div class="DonateView"></div>
<script src="https://xiangyuecn.gitee.io/recorder/assets/zdemo.widget.donate.js"></script>
<script>
DonateWidget({
	log:function(msg){var div=document.createElement("div");div.innerHTML=msg;document.querySelector(".DonateLogs").appendChild(div)}
	,mobElem:document.querySelector(".DonateView")
});
</script>

</body>
</html>
